<template>
    <el-upload
            class="upload-demo"
            ref="upload"
            :action="uploadUrl()"
            :data="uploadData"
            name="file"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            :on-error="uploadFalse"
            :on-success="uploadSuccess"
            :auto-upload="false"
            :limit="1"
            :before-upload="beforeAvatarUpload">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">导入</el-button>
        <div slot="tip" class="el-upload__tip">只能上传excel文件(限一个)</div>
    </el-upload>
</template>

<script>
    export default {
        name: "Upload",
        data() {
            return {
                fileList: [],
                uploadData: {},
            }
        },
        methods: {
            uploadUrl: function () {
                return this.url;
            },
            uploadSuccess(response, file, fileList) {
                if (response==='OK') {
                    this.$message({
                        type: 'success',
                        message: '导入成功!'
                    });
                    this.fileList = []
                    this.uploadData = {}
                } else {
                    this.$message({
                        type: 'error',
                        message: '导入失败!1'
                    });
                }
            },
            uploadFalse(response, file, fileList) {
                console.log(response)
                this.$message({
                    type: 'error',
                    message: '导入失败!2'
                });
            },
            // 上传前对文件的大小的判断
            beforeAvatarUpload(file) {
                const extension = file.name.split(".")[1] === "xls";
                const extension2 = file.name.split(".")[1] === "xlsx";
                const extension3 = file.name.split(".")[1] === "doc";
                const extension4 = file.name.split(".")[1] === "docx";
                const isLt2M = file.size / 1024 / 1024 < 10;
                if (!extension && !extension2 && !extension3 && !extension4) {
                    this.$message({
                        type: 'error',
                        message: '上传模板只能是 xls、xlsx、doc、docx 格式!'
                    });
                }
                if (!isLt2M) {
                    this.$message({
                        type: 'error',
                        message: '上传模板大小不能超过 10MB!'
                    });
                }
                return extension || extension2 || extension3 || (extension4 && isLt2M);
            },
            submitUpload() {
                this.$refs.upload.submit();
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file.response)
                if (file.response.status) {
                    this.$message({
                        type: 'success',
                        message: '导入成功!3'
                    });
                } else {
                    this.$message({
                        type: 'error',
                        message: '导入失败!4'
                    });
                }
            }
        },
        watch: {
            close_file: function (newV, oldV) {
                if (newV) {
                    //关闭清空文件列表
                    this.fileList = []
                    this.uploadData = {}
                }
            }
        },
        props: ['close_file','url']
    }
</script>

<style scoped>

</style>
